<template>
	<view class="commentItem">
		<view class="outer">
			<view class="avatar">
				<image class="pic" src="../../static/images/defAvatar.png" mode="aspectFill"></image>
			</view>		
			<view class="content">
				<view class="userinfo">
					<view class="left">
						<view class="name">放羊的QQ</view>
						<view class="time">刚刚</view>
					</view>
					<view class="right">
						<view class="like">
							<view class="num">33</view>
							<uni-icons v-if="true" type="hand-up" size="20" color="#a7a7a7"></uni-icons>
							<uni-icons v-else type="hand-up-filled" size="20" color="#dd524d"></uni-icons>							
						</view>
						<view class="remove">
							<uni-icons type="trash" size="20" color="#a7a7a7"></uni-icons>
							<text>删除</text>
						</view>
					</view>
				</view>
				<view class="reply">
					<text class="text">
						回复<text class="nickname">@李四</text>
					</text>
					这是首条评论
				</view>
			</view>
		</view>
		
		<view class="subReply" v-if="subReply" @click="goReply">
			<view class="list">
				<view class="row">张三：啊，对对</view>
				<view class="row">李四：二级回复内容</view>
				<view class="row more">共3条回复 
					<uni-icons type="right" color="#a7a7a7" size="16"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		subReply:{
			type:Boolean,
			default:false
		}
	})
	
	//点击回复
	const goReply = ()=>{
		if(props.subReply){
			uni.navigateTo({
				url:"/pages/detail/reply"
			})
		}	
	}

</script>

<style lang="scss" scoped>
	.commentItem{
		padding: 30rpx;
		.outer{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.avatar{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50rpx;
				overflow: hidden;
				margin-right: 20rpx;
				.pic{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				flex: 1;
				.userinfo{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						.name{
							font-size: 26rpx;
							color:$text-font-color-2;
						}
						.time{
							font-size: 22rpx;
							color:$text-font-color-3;
						}
					}
					.right{
						color:$text-font-color-3;
						font-size: 22rpx;
						display: flex;
						align-items: center;
						.like{
							display: flex;
							align-items: center;
							.num{
								margin-right: 5rpx;
							}
						}
						.remove{
							margin-left:20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						
					}					
				}

				.reply{
					padding: 20rpx 0;
					font-size: 30rpx;
					color:$text-font-color-1;
					line-height: 1.7em;
					.text{
						color:$text-font-color-3;
						.nickname{
							color:$brand-theme-color;
						}
					}
				}
			}
		}
		.subReply{
			padding-left:80rpx;
			.list{
				background: #f4f4f4;
				padding:20rpx;
				border-radius: 10rpx;
				.row{
					line-height: 1.8em;
					font-size: 28rpx;
					color:$text-font-color-2;
				}
				.more{
					color:$text-font-color-3;
				}
			}
		}
	}

</style>